<template>
  <div class="test-popup-container">
    <h2>我是Popup页面的popup弹窗组件</h2>
    <img src="../../assets/a.jpeg" alt="" />
    <el-button type="success" @click="handleRateAdd">好评++</el-button>
    <el-button type="success" @click="handleRateReset">重置好评</el-button>
    <el-link type="warning" style="margin-left: 12px">el-link测试</el-link>
    <el-rate v-model="value1" />
    <h3>以下是pinia使用</h3>
    <span style="margin-right: 12px"
      >pina中的count值====> {{ store.count }}</span
    >
    <el-button type="success" @click="handlePinaAdd"
      >pina中的count值add</el-button
    >
    <h2>测试less使用999111222</h2>
    <ul class="tpc">
      <li>lesss 1</li>
      <li>lesss 2</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '../store/counter' // 引入pinia 数据
const value1 = ref(2)
const handleRateAdd = () => {
  value1.value++
}
const handleRateReset = () => {
  value1.value = 2
}
// 引入pinia 数据
const store = useCounterStore()

const handlePinaAdd = () => {
  store.increment()
}
</script>

<style lang="less">
.test-popup-container {
  ul li {
    list-style: none;
  }
  .tpc li:last-child {
    color: red;
  }
}
</style>
